<template>
  <div class="search-container">
      <div class="select">
        <el-select v-model="rangeValue" placeholder="全部" size='small'>
            <el-option
            v-for="item in rangeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </div>
      <div class="select">
        <el-select v-model="statusValue" placeholder="任务状态" size='small'>
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
      </div>
      <div class="block">
        <el-date-picker
        value-format="yyyy-MM-dd"
        size="small"
        v-model="timeValue"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </div>
      <div class="input">
          <el-input v-model="input" placeholder="输入工单编号进行查找" size="small"></el-input>
      </div>
      <div class="confirm">
          <el-button type="primary" icon="el-icon-search" size="small" @click="confirm">查询</el-button>
      </div>
  </div>
</template>
<script>
export default {
  props: {
      options: {
        type: Array,
        default: [{
            value: '1',
            label: '待接单'
            }, {
            value: '2',
            label: '处理中'
            }, {
            value: '3',
            label: '已完成'
            }, {
            value: '4',
            label: '已撤销'
            }],
      }
  },
  data() {
     return {
        rangeValue: '1',
        statusValue: '',
        timeValue: '',
        input: '',
        rangeOptions: [{
            value: '1',
            label: '全部'
            }, {
            value: '2',
            label: '维保'
            }, {
            value: '3',
            label: '报修'
            }
        ]
     }
  },
  methods: {
      confirm() {
          let params = {
              rangeValue: this.rangeValue,
              status: this.statusValue,
              startDate: this.timeValue[0] || '',
              endDate: this.timeValue[1] || '',
              planName: this.input
          }
          this.$emit('searchParams', params)
      }
  }
}
</script>
<style lang="less" scoped>
.search-container {
    width: 100%;
    display: flex;
    
    .select {
        width: 100px;
        margin-right: 10px;
    }
    .block {
        width: 240px;
        margin-right: 10px;
        /deep/ .el-range-editor--small.el-input__inner {
           width: 100%;
        }
    }
    .input {
        margin-right: 10px;
    }
    
}
</style>